<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2D转换</title>
	</head>
	<body>
		<canvas id="c1" width="800" height="600"></canvas>
		<script>
			var c1 = document.getElementById('c1');
			var ctx = c1.getContext('2d');
			
			// 缩放x、y轴
			ctx.scale(2,2);
			ctx.fillStyle = 'slategray';
			ctx.fillRect(250,0,100,100);
			
			ctx.scale(0.5,0.5);//防止后面跟着缩放
			// 将x、y坐标进行移动
			// ctx.translate(200,0);
			ctx.fillStyle = 'darkcyan';
			ctx.fillRect(100,0,300,100);
			
			// // 沿原点坐标进行旋转
			ctx.rotate(Math.PI/4);
			ctx.fillStyle = 'darkcyan';
			ctx.fillRect(100,0,300,100);
		
		</script>
	</body>
</html>
